<template>
  <div class="center" v-bind:style="{ width:divWidth,height: divHeight }">
    <div class="bg-color-black" v-bind:style="{ height: bgDivHeight }">
      <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-vector" />
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2" v-if="tableTitle">{{ tableTitle }}</span>
          <dv-decoration-3 class="dv-dec-3" />
        </div>
      </div>
      <div class="d-flex mt-1 jc-center body-box"  v-bind:style="{ height: tbDivHeight }">
        <dv-table-draw :tableConfig="tableConfig"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, toRef } from 'vue'
import DvTableDraw from './draw'
export default defineComponent({
  props: {
    table: {
      type: Object,// 引用类型的话,默认值要为函数返回值的形式!!! 1.String 2.Number 3.Boolean 4.Array 5.Object 6.Date 7.Function 8.Symbol
      require: true
    },
  },
  components: {
    DvTableDraw
  },
  setup(props) {
    //如果 title 是可选的 prop，则传入的 props 中可能没有 title 。在这种情况下，toRefs 将不会为 title 创建一个 ref 。你需要使用 toRef 替代它：
    // const { title } = toRefs(props)
    // const title = toRef(props, 'title')
    const { table } = toRefs(props)
    const  tableTitle = table.value.title
    const  divWidth = table.value.width
    const  divHeight = table.value.height
    const  bgDivHeight = table.value.bgHeight
    const  tbDivHeight = table.value.tbHeight
    const  tableConfig = table.value.config
    console.log(tableConfig)
    return {tableTitle: tableTitle,tableConfig: tableConfig , divWidth, divHeight, bgDivHeight, tbDivHeight}
  }
})
</script>

<style lang="scss" scoped>
.center {
  padding: 15px 10px 10px;
  border-radius: 5px;
  .bg-color-black {
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .dv-dec-3 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
  }

}
</style>
